<template>
  <el-card class="box-card" shadow="hover">
    <template #header>
      <div class="card-header">
        <el-input placeholder="输入：登录名、用户名" clearable style="width: 220px;margin-right: 10px"/>
        <el-button type="primary" plain :icon="Search">搜索</el-button>
      </div>
    </template>
    <div>
      <div class="table-title">
        <span>用户列表</span>
        <div>
          <el-button type="primary" plain :icon="CirclePlus">新增</el-button>
          <el-button type="warning" plain :icon="Delete">批量删除</el-button>
        </div>
      </div>
      <el-table :data="tableData"
                stripe
                border
                :header-cell-style="{background:'#E91E63',color:'#fff'}"
                highlight-current-row>
        <el-table-column type="selection"/>
        <el-table-column type="index" label="序号" width="55"/>
        <el-table-column prop="account" label="登录名"/>
        <el-table-column prop="name" label="姓名"/>
        <el-table-column prop="sex" label="性别"/>
        <el-table-column prop="role" label="角色"/>
        <el-table-column prop="phone" label="手机号码"/>
        <el-table-column prop="date" label="创建日期"/>
        <el-table-column prop="address" label="地址"/>
        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button type="primary" plain :icon="Edit">编辑</el-button>
            <el-button type="warning" plain :icon="Delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script>
import {reactive} from "vue"
import {Search, Edit, Delete, CirclePlus} from '@element-plus/icons-vue'
import moment from "moment"

export default {
  name: "UserList",
  setup() {
    const tableData = reactive([{
      account: 'oldHong',
      name: '老洪',
      sex: 1,
      role: '鸡儿',
      phone: '12345678123',
      date: moment().format('yyyy-MM-DD HH:mm:ss'),
      address: '云锦路233弄'
    }, {
      account: 'gouhui',
      name: '狗慧',
      sex: 1,
      role: '鸡儿',
      phone: '12345678123',
      date: moment().format('yyyy-MM-DD HH:mm:ss'),
      address: '居家桥路955弄'
    }, {
      account: 'feimiao',
      name: '废喵',
      sex: 0,
      role: '鸡儿',
      phone: '12345678123',
      date: moment().format('yyyy-MM-DD HH:mm:ss'),
      address: '徐家汇xx弄不知道'
    }]);
    return {
      Search,
      Edit,
      Delete,
      CirclePlus,
      tableData
    }
  }
}
</script>
